import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { Layout } from "antd";
const { Content } = Layout;
import Blbreadcrumb from "../components/Blbreadcrumb";
import { Outlet } from "react-router-dom";
import { CSSTransition } from "react-transition-group";
import "./Bcontent.css";
export default function Bcontent() {
  const location = useLocation();
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(()=>{
    setIsTransitioning(true);
    console.log("location.key",location)
    const transitionTimer = setTimeout(() => {
      setIsTransitioning(false);
    }, 500); // 设置一个与CSSTransition的timeout相同的延迟

    return () => clearTimeout(transitionTimer); // 下次执行effect清除定时器
  },[location.pathname])

  return (
    <>
      <Blbreadcrumb></Blbreadcrumb>
      <Content
        style={{
          padding: 24,
          Height: "100vh",
          background: "#fff",
        }}
      >
        <CSSTransition classNames="fade" timeout={500} in={!isTransitioning}>
          <Outlet></Outlet>
        </CSSTransition>
      </Content>
    </>
  );
}
